<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!-- Menu -->
<jsp:include page="menuForGroup.jsp" />
<script type="text/javascript">
    $(document).ready(function() {
        sort();
    });
</script>
<div class="content">
    <div class="insider">
        <div class="search_box">
            <form action="search.html" method="get">
                <ul class="fl">
                    <li class="word_box">
                        <input type="text" id="keywords" name="keywords" value="${not empty param['keywords'] ? param['keywords'] : 'Search by Keywords...'}"
                               onclick="searchClean(this)" />
                    </li>
                </ul>

                <ul class="fr">

                    <li>
                        <input type="image" class="btn" src="<%= request.getContextPath()%>/images/btn/btn_search3.gif"
                               onclick="searchClean($('#keywords'))"/>
                    </li>
                </ul>
            </form>
        </div>

        <div class="error">
            <h3>
                ${foundMessage}
                ${empty message ? '' : '<br />'}<font >${message}</font>
            </h3>
            <div class="display_mode">
                <h4>Display mode:</h4>
                <ul>
                    <li id="brief" onclick="briefMode();"><a href="#">Brief</a></li>
                    <li id="full" class="active" onclick="fullMode();"><a href="#">Full</a></li>
                </ul>
            </div>
        </div>

        <ul class="functions2">
            <li class="fr">
                <a href="create.html" class="retire">
                    <img src="<%= request.getContextPath()%>/images/btn/btn_create_new.gif" width="127" height="21" alt="text" class="btn" />
                </a>
            </li>
            <li>
                <a href="#" onclick="clickAction('view')">
                    <img src="<%=request.getContextPath()%>/images/btn/functions2/btn_view.gif"
                         width="68" height="23" alt="view" class="btn" />
                </a>
            </li>

            <li>
                <a href="#" onclick="clickAction('edit')">
                    <img src="<%=request.getContextPath()%>/images/btn/functions2/btn_edit.gif"
                         width="68" height="23" alt="view" class="btn" />
                </a>
            </li>
        </ul>

        <table width="100%" cellspacing="0" class="data_thead">
            <thead>
                <tr>
                    <th width="20%" column="name" class="${(param.sortColumn == 'name' and param.sortBy=='asc')?'id_move_up' : (column == 'name' and param.sortBy=='desc')?'id':''} sort">ID</th>
                    <th width="40%" column="description" class="${(param.sortColumn == 'description' and param.sortBy=='asc')?'id_move_up' : (param.sortColumn=='description' and param.sortBy=='desc')?'id':''} sort">Description</th>
                    <th width="40%" column="contactName" class="${(param.sortColumn == 'contactName' and param.sortBy=='asc')?'id_move_up' : (param.sortColumn=='contactName' and param.sortBy=='desc')?'id':''} end sort">Contact Name</th>
                </tr>
            </thead>
        </table>

        <div id="dataList" class="data_tbody">
            <c:forEach var="group" items="${groups}">
                <div onclick="itemClick(this, 'groupname=${group.name}');" onmouseover="itemHover(this);"
                     onmouseout="itemMouseOut(this);">
                    <table width="100%" cellspacing="0" class="data_tbody_title">
                        <tbody>
                            <tr>
                                <td width="20%" class="id_number">${group.name}</td>
                                <td width="40%"><c:out value="${group.description}" /></td>
                                <td width="40%"><c:out value="${group.contactName}" /></td>
                            </tr>
                        </tbody>
                    </table>
                    <table width="100%" border="0" cellspacing="0" class="tro">
                        <tr>
                            <td width="30%">Phone: ${group.contactPhone}</td>
                            <td colspan="2" class="end">Email: ${group.contactEmail}</td>
                        </tr>
                    </table>
                </div>
            </c:forEach>
            <!-- Pagination -->
            <%@include file="../../template/pager.jsp" %>
        </div>
    </div>
</div>